<template>
  <div>
    <!-- table -->
    <a-card style="overflow: scroll;">
      <div class="table-operator">
        <a-button :loading="loadingConfirm" :disabled="this.selectedId.length==0" @click="handleClickMulConfirm" type="primary">
          {{ $t('verifyOrder.pltg') }}
        </a-button>
      </div>
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        style="width:100%;"
        :loading="memberLoading"
        :rowSelection="{onChange: onSelectChange}"
      >
        <template slot="user_proto.username" slot-scope="text, record">
          <div>
            <template v-if="record.user_proto.vip">{{record.user_proto.vip.name}}</template>
            <template v-else>{{ $t('verifyOrder.pthy') }}</template>
          </div>
          <div>{{text}}</div>
        </template>
        <template slot="task_proto_title" slot-scope="text, record">
          <template>
            <div>
              {{record.task_proto.title}}
            </div>
            <div style="margin:10px 0 ;" >
              <div v-if="record.task_proto.type < 5">
                <a :href="record.task_proto.url" target="_blank">{{ $t('verifyOrder.cklj') }}</a>
              </div>
              <div v-else-if="record.task_proto.type == 5">
                <span style="cursor: pointer;" @click="handleClickReviewDesc(record.task_proto.desc)">👀{{ $t('verifyOrder.ckyq') }}</span>
              </div>
            </div>
            <div><a :href="record.task_proto.url" target="_blank">{{ $t('verifyOrder.cklj') }}</a></div>
          </template>
        </template>
        <template slot="start_data" slot-scope="text, record">
          <template>
            <div v-if="record.task_proto.type == 1">
              <div>
                <dl>
                  <dt>{{ $t('verifyOrder.kssj') }}</dt>
                  <dd v-if="record.start_data">
                    {{ $t('verifyOrder.gz') }}: {{record.start_data.following_count}}
                    {{ $t('verifyOrder.fs') }}: {{record.start_data.follower_count}}
                    {{ $t('verifyOrder.hz') }}: {{record.start_data.total_favorited}}
                  </dd>
                </dl>
              </div>
              <div>
                <dl>
                  <dt>{{ $t('verifyOrder.jssj') }}</dt>
                  <dd v-if="record.finish_data">
                    {{ $t('verifyOrder.gz') }}: {{record.finish_data.following_count}}
                    {{ $t('verifyOrder.fs') }}: {{record.finish_data.follower_count}}
                    {{ $t('verifyOrder.hz') }}: {{record.finish_data.total_favorited}}
                  </dd>
                </dl>
              </div>
            </div>
          </template>
        </template>
        <template slot="imgs" slot-scope="text">
          <template>
            <div v-if="text">
              <img v-for="item in text.split(',')" @click="handleClickReview($hostServer+item)" class="table-img" :src="$hostServer+item" alt=""/>
            </div>
            <div v-else>-</div>
          </template>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span>
            <a @click="handleClickVerifySuccess(record.id)">{{ $t('verifyOrder.tg') }}</a>
            <a-divider type="vertical" />
            <a style="color:red;" @click="handleClickVerifyFail(record.id)">{{ $t('verifyOrder.jj') }}</a>
          </span>
        </template>
      </a-table>
    </a-card>
    <a-modal title="$t('verifyOrder.jjyy')" v-model="showInputDialog" @ok="handleInputDialogOk">
      <p>
        <a-input v-model="refuse_content" placeholder="$t('verifyOrder.qsr')..." />
      </p>
    </a-modal>
    <DialogImg :img_url="curr_img_url" :is_show="curr_img_show"/>
    <a-modal title="$t('verifyOrder.ck')" v-model="showDescDialog" @ok="handleDescDialogOk">
      <div style="padding:10px;">
        <div v-html="reviewDesc"></div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mixin, mixinDevice } from '@/utils/mixin'
import DialogImg from '../../components/DialogImg'

export default {
  name: 'Order',
  mixins: [mixin, mixinDevice],
  components: {
    DialogImg
  },
  data () {
    return {
      curr_img_url: '',
      curr_img_show: false,
      description: this.$t('verifyOrder.wxdyhswsks'),
      loading: false,
      loadingConfirm: false,
      memberLoading: false,
      showDescDialog: false,
      reviewDesc: '',
      curr_id: '',
      // table
      columns: [
        {
          title: this.$t('verifyOrder.rwmc'),
          dataIndex: 'task_proto.title',
          key: 'task_proto.title',
          scopedSlots: { customRender: 'task_proto_title' }
        },
        {
          title: this.$t('verifyOrder.rwjl'),
          dataIndex: 'task_proto.single_reward',
          key: 'task_proto.single_reward',
          scopedSlots: { customRender: 'task_proto.single_reward' }
        },
        {
          title: this.$t('verifyOrder.cyz'),
          dataIndex: 'user_proto.username',
          key: 'user_proto.username',
          scopedSlots: { customRender: 'user_proto.username' }
        },
        {
          title: this.$t('verifyOrder.dkcs'),
          dataIndex: 'clicked',
          key: 'clicked',
          scopedSlots: { customRender: 'clicked' }
        },
        {
          title: this.$t('verifyOrder.jksj'),
          dataIndex: 'start_data',
          key: 'start_data',
          scopedSlots: { customRender: 'start_data' }
        },
        {
          title: this.$t('verifyOrder.shnr'),
          dataIndex: 'content',
          key: 'content',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: this.$t('verifyOrder.shtp'),
          dataIndex: 'imgs',
          key: 'imgs',
          scopedSlots: { customRender: 'imgs' }
        },
        {
          title: this.$t('verifyOrder.tjsj'),
          dataIndex: 'updated_at',
          key: 'updated_at'
        },
        {
          title: this.$t('verifyOrder.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      errors: [],
      showInputDialog: false,
      refuse_content: '',
      selectedId: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    onSelectChange (selectedRowKeys) {
      this.selectedId = []
      for (let i = 0; i < selectedRowKeys.length; i++) {
        this.selectedId.push(this.data[selectedRowKeys[i]].id)
      }
      console.log(this.selectedId)
    },
    handleClickReviewDesc (html) {
      this.reviewDesc = html
      this.showDescDialog = true
    },
    handleInputDialogOk () {
      this.showInputDialog = false
      this.$http.post('/verify/order_fail', this.$qs.stringify({
        id: this.curr_id,
        content: this.refuse_content
      })).then(res => {
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyOrder.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyOrder.sb'),
          description: err.message
        })
      })
    },
    handleDescDialogOk () {
      this.showDescDialog = false
    },
    getList () {
      this.$http.get('/verify/order_list').then(res => {
        this.data = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyOrder.sb'),
          description: err.message
        })
      })
    },
    handleClickMulConfirm () {
      this.loadingConfirm = true
      this.$http.post('/verify/order_success', this.$qs.stringify({
        id: this.selectedId
      })).then(res => {
        if (res.code === 0) {
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyOrder.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyOrder.sb'),
          description: err.message
        })
      }).then(() => {
        this.loadingConfirm = false
      })
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    handleClickVerifySuccess (id) {
      this.$http.post('/verify/order_success', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyOrder.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: '失败',
          description: err.message
        })
      })
    },
    handleClickVerifyFail (id) {
      this.curr_id = id
      this.showInputDialog = true
    },
    handleClickReview (url) {
      this.curr_img_url = url
      this.curr_img_show = !this.curr_img_show
    }
  }
}
</script>

<style lang="less" scoped>
  .table-img{
    max-width: 100px;
    max-height: 100px;
    margin-right:10px;
    margin-bottom:5px;
    border:thin dashed #ccc;
    padding:5px;
  }
  .card{
    margin-bottom: 24px;
  }
  .popover-wrapper {
    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
      min-width: 256px;
      max-height: 290px;
      padding: 0;
      overflow: auto;
    }
  }
  .antd-pro-pages-forms-style-errorIcon {
    user-select: none;
    margin-right: 24px;
    color: #f5222d;
    cursor: pointer;
    i {
          margin-right: 4px;
    }
  }
  .antd-pro-pages-forms-style-errorListItem {
    padding: 8px 16px;
    list-style: none;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: #e6f7ff;
    }
    .antd-pro-pages-forms-style-errorIcon {
      float: left;
      margin-top: 4px;
      margin-right: 12px;
      padding-bottom: 22px;
      color: #f5222d;
    }
    .antd-pro-pages-forms-style-errorField {
      margin-top: 2px;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }
  }
</style>
